<li class="list-group-item d-flex flex-column p-0 category-item
    {% if category.id == selected %}table-danger{% endif %}"
    data-category-id="{{ category.id }}"
    data-has-children="{% if category.children.all %}true{% else %}false{% endif %}"
    {% if category.level > 0 %}style="padding-left: 5px" {% endif %}>

  <!-- 第一行：分类名称 + 操作按钮（同行显示） -->
  <div class="d-flex justify-content-between align-items-center w-100 py-2 px-3">
    <!-- 分类名称部分 -->
    <div class="d-flex align-items-center flex-grow-1 min-width-0 pe-2">
      {% if category.children.all %}
      <button class="btn btn-sm btn-link p-0 me-1 toggle-children"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#children-{{ category.id }}"
              aria-expanded="false"
              aria-controls="children-{{ category.id }}">
        <i class="bi bi-caret-right-fill"></i>
      </button>
      {% endif %}
      <a href="?category_id={{ category.id }}"
         class="text-decoration-none text-dark category-name"
         title="{{ category.name }}">
        {% if not category.children.all %}
            <i class="bi bi-folder-fill me-1 text-primary"></i>
        {% endif %}
        {{ category.name }}
      </a>
    </div>

    <!-- 操作按钮部分 -->
    <div class="flex-shrink-0 dropdown" data-bs-auto-close="outside">
      <button class="btn btn-sm btn-light dropdown-toggle border-0 shadow-sm"
              type="button"
              data-bs-toggle="dropdown"
              data-bs-auto-close="outside"
              aria-expanded="false"
              style="background: linear-gradient(to bottom, #ffffff, #f8f9fa)">
        操作
      </button>
      <ul class="dropdown-menu dropdown-menu-end shadow-sm p-1"
          style="min-width: fit-content; border-radius: 0.375rem">
        <li><a class="dropdown-item px-3 py-2" href="#" data-action="edit-{{ category.id }}">修改名称</a></li>
        <li><a class="dropdown-item px-3 py-2" href="#" data-action="delete-{{ category.id }}">删除此类</a></li>
        <li><hr class="dropdown-divider my-1"></li>
        <li><a class="dropdown-item px-3 py-2" href="#" data-action="add-{{ category.id }}">添加子类</a></li>
      </ul>
    </div>
  </div>

  <!-- 第二行：子分类容器（独立行显示） -->
  {% if category.children.all %}
  <div class="collapse children-container w-100" id="children-{{ category.id }}">
    <ul class="list-group list-group-flush children-list ps-4"
        data-parent-id="{{ category.id }}">
      {% for child in category.children.all %}
        {% include 'ecom/product/category_item.html' with category=child selected=selected_category_id %}
      {% endfor %}
    </ul>
  </div>
  {% endif %}
</li>
